<html lang="zh-CN">
<head>
  <title>网址缩短服务 | dqv5.com</title>
  <meta charset="utf-8"/>
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
  <script th:src="@{/js/axios.min.js}"></script>
</head>
<body>
<h1>网址缩短服务 works!</h1>
原网址：<input id="origin"/>
<button onclick="shortUrl()">缩短==></button>
短网址：<input id="short" readonly/>
<button onclick="copyUrl()">复制</button>
<button onclick="openUrl()">打开</button>
<script>
  let origin, short;

  function shortUrl() {
    origin = document.getElementById('origin').value;
    axios({
      url: './api/short',
      method: 'post',
      data: {url: origin}
    }).then(res => {
      const data = res.data;
      short = data.short;
      document.getElementById('short').value = short;
    });
  }

  function copyUrl() {
    alert(short);
  }

  function openUrl() {
    window.open(short);
  }

</script>
</body>
</html>
